<template>
  <a-drawer
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-form-model-item label="打印机编号" prop="Code">
          <a-input v-model="entity.Code" autocomplete="off" placeholder="系统自动生成" disabled />
        </a-form-model-item>
        <a-form-model-item label="打印机名称" prop="Name">
          <a-input v-model="entity.Name" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="组织" prop="DeptId">
          <a-tree-select
            allowClear
            :treeData="DeptList"
            placeholder="请选择隶属机构"
            @change="SelectOrgan"
            v-model="entity.DeptId"
          ></a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="打印机类型" prop="Type">
          <a-select v-model="entity.Type" >
            <a-select-option
              v-for="(item, index) in TypeList"
              :value="item.DicValue"
              :key="index"
            >{{ item.DicName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="打印机ip地址" prop="IP">
          <a-input v-model="entity.IP" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="打印机Mac地址" prop="Mac">
          <a-input v-model="entity.Mac" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="Remarks">
          <a-input v-model="entity.Remarks" autocomplete="off" />
        </a-form-model-item>

        <a-form-item label="当前状态" prop="Status">
          <a-select allowClear v-model="entity.Status" :default-value="0">
            <a-select-option :value="0">正常</a-select-option>
            <a-select-option :value="1">故障</a-select-option>
          </a-select>
        </a-form-item>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button
        :style="{ marginRight: '8px' }"
        @click="
          () => {
            this.visible = false
          }
        "
      >取消</a-button
      >
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>

export default {
  components: {
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    parentObj: Object
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      TypeList: [],
      DeptList: [],
      visible: false,
      loading: false,
      entity: { Status: 0 },
      rules: {
        DeptId: [{ required: true, message: '请选择组织', trigger: 'change' }],
        Name: [{ required: true, message: '请输入打印机名称', trigger: 'blur' }],
        IP: [{ required: true, message: '请输入打印机ip地址', trigger: 'blur' }],
        Mac: [{ required: true, message: '请输入打印机mac地址', trigger: 'blur' }],
        Type: [{ required: true, message: '选择打印机类型', trigger: 'change' }]
      },
      title: '',
      ParentIdTreeData: [],
      organ: '',
      Workitem: [],
      did: '',
      printitem: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      queryParam: {}
    }
  },
  mounted() {},
  methods: {
    changeWorkshopId(a) {
      console.log(a)
      // this.entity.WorkshopId = a
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    init() {
      this.visible = true
      this.Organ()
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.TypeList = []
      this.$http.post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'PrinterType' }).then(resJson => {
        this.loading = false
        this.TypeList = resJson.Data.DictionaryDetailsList
      })
      this.DeptList = []
      this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', { }).then(resJson => {
        this.loading = false
        this.DeptList = resJson.Data
      })
    },
    SelectOrgan(a) {
      console.log(a)
      this.Workitem = []
      this.$set(this.entity, 'WorkshopId', null)
      this.$http.post('/Base_Manage/Base_Department/GetWorkshopTreeDataList', {
        'parentId': a,
        'selectable': true
      }).then((resJson) => {
        console.log(resJson)
        if (resJson.Success) {
          this.Workitem = resJson.Data
        }
      })
    },
    Organ() {
      // this.$http.post('/View/View_Base_Department/GetTreeTypeDataLists', { Type: 1 }).then(resJson => {
      this.$http.post('/View/View_Base_Department/GetTreeTypeDataLists', { Type: 1 }).then((resJson) => {
        if (resJson.Success) {
          console.log(this.ParentIdTreeData)
          this.ParentIdTreeData = resJson.Data
        }
      })
    },
    openForm(id, title) {
      this.init()
      this.title = title
      // this.$http
      //   .post('/PB/PB_PrinterType/GetDataList', {
      //     PageIndex: this.pagination.current,
      //     PageRows: this.pagination.pageSize,
      //     SortField: this.sorter.field || 'Id',
      //     SortType: this.sorter.order,
      //     Search: this.queryParam,
      //     ...this.filters
      //   })
      //   .then((resJson) => {
      //     console.log(resJson)
      //     this.loading = false
      //     this.printitem = resJson.Data
      //     const pagination = { ...this.pagination }
      //     pagination.total = resJson.Total
      //     this.pagination = pagination
      //   })
      // this.Organ()
      if (id) {
        this.SelectOrgan()
        this.loading = true
        this.$http.post('/PB/PB_Printer/GetTheData', { id: id }).then((resJson) => {
          this.loading = false
          this.entity = resJson.Data
          this.organ = resJson.Data.DeptId

          console.log(this.entity)
          resJson.Data.Status = resJson.Data.Status == 0 ? '正常' : '故障'
        })
      }
    },
    handleSubmit() {
      console.log(this.entity)
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        if (this.title == '编辑打印机' && this.entity.Status) {
          if (this.entity.Status != '' || this.entity.Status != null) {
            this.entity.Status = this.entity.Status == '正常' ? 0 : 1
          }
        }
        console.log(this.entity)
        this.$http.post('/PB/PB_Printer/SaveData', this.entity).then((resJson) => {
          this.loading = false
          // this.entity = resJson.Data
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
